<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<!-- 帮助界面 -->
			<div class="layui-header">
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item layui-this">
						<a href="">关于我们</a>
					</li>
					<li class="layui-nav-item">
						<div class="layui-btn-container" >
							<a href="">
								<i class="layui-icon layui-icon-help" style="font-size: 10px; color: #ffffff;"></i>
								帮助
							</a>
						</div>
					</li>
				</ul>
			<!-- 主体容器 -->
			<div class="layui-layout-admin" style="background-image: url(img/loginbg.jpg);height: 1920px;margin-top: 58px;">
				 <div class="layui-row">
				    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-layout-right" style="background-color: #E7E8DA;
					width: 340px;height: 500px;margin-right: 270px;margin-top: 190px;border-top-right-radius: 40px;border-bottom-left-radius: 40px;box-shadow:0px 0px 10px 2px #777777;">
						<div class="layui-nav" style="height: 120px;border-top-right-radius: 40px;background-image: url(img/loginbox.png);background-size:116%  260%;">
						    
						</div>
						  <form class="layui-form" action="" lay-filter="example" style="margin-top: 50px;margin-left: -15px;width: 320px;">
						    <div class="layui-form-item">
						      <label class="layui-form-label">账&nbsp;&nbsp;&nbsp;&nbsp;号</label>
						      <div class="layui-input-inline" style="height: 50px;">
						        <input type="text" name="eid" lay-verify="zhanghao|number" autocomplete="off" placeholder="请输入账号" class="layui-input" >
						      </div>
						    </div>
						    <div class="layui-form-item">
						      <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
						      <div class="layui-input-inline">
						        <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="pass">
								<div class="layui-form-mid layui-word-aux" style="font-size: 10%;">请填写6到12位密码</div>
						      </div>
						    </div>
						    
						    
						    <div class="layui-form-item">
						      <label class="layui-form-label">角&nbsp;&nbsp;&nbsp;&nbsp;色</label>
						      <div class="layui-input-block">
						        <input type="radio" name="identity" value="1" title="财务部">
						        <input type="radio" name="identity" value="2" title="人事部">
						      </div>
						    </div>
						    <div class="layui-form-item">
						      <div class="layui-input-block" style="margin-top: 25px;">
						        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1"style="width: 230px;margin-left: -30px;">登录</button>
						      </div>
						    </div>
						  </form>
				    </div>
				</div>
			</div>
		</div>
		</div>
		<!-- 脚本部分 -->
		<script src="./layui/layui.js"></script>
		<script>
		//注意：导航 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
		</script>
		<script>
		layui.use(['form', 'layedit', 'laydate'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate;
		  
		  //日期
		  laydate.render({
		    elem: '#date'
		  });
		  laydate.render({
		    elem: '#date1'
		  });
		  
		  //创建一个编辑器
		  var editIndex = layedit.build('LAY_demo_editor');
		 
		  //自定义验证规则
		  form.verify({
		    zhanghao: function(value){
		      if(value.length != 11){
		        return '请输入11位账号';
		      }
		    }
		    ,pass: [
		      /^[\S]{6,12}$/
		      ,'密码必须6到12位，且不能出现空格'
		    ]
		    ,content: function(value){
		      layedit.sync(editIndex);
		    }
		  });
		  
		  //监听提交
		  form.on('submit(demo1)', function(data){
		    // layer.alert(JSON.stringify(data.field), {
		    //   title: '最终的提交信息'
		    // })
			console.log(JSON.stringify(data.field));
		    return false;
		  });
		});
		</script>
	</body>
</html>
